<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内置函数的调用绑定(Binding of built-in function calls)</title>
  <!-- 
  在JavaScript中，this关键字的绑定是一个重要的概念，它决定了函数执行时this的指向。内置函数调用（例如数组方法、对象方法等）在调用时，会根据调用的上下文来确定this的值。
  一、this的绑定规则
  1. 全局上下文：
    - 在全局上下文中，this指向全局对象。在浏览器中，this指向window对象。
    console.log(this); // 在浏览器中输出: Window {...}
  2. 事件处理程序：
    - 在事件处理程序中，this指向触发事件的元素。
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      console.log(this); // 输出: <button id="myButton">...</button>
    });

  二、内置函数的this绑定
  内置函数（如数组方法、字符串方法等）在调用时也遵循this绑定规则。通常情况下，内置方法的this指向调用该方法的对象。
  1. 数组方法：
    - 例如，Array.prototype.map()、Array.prototype.forEach()等方法中的this指向调用这些方法的数组。
    const numbers = [1, 2, 3];
    const doubled = numbers.map(function(num) {
      return num * 2; // 这里的this指向数组numbers
    });
    console.log(doubled); // 输出: [2, 4, 6]
  2. 字符串方法：
    - 例如，String.prototype.replace()中的this指向调用该方法的字符串。
    const str = 'Hello, World!';
    const newStr = str.replace('World', 'JavaScript'); // 这里的this指向字符串str
    console.log(newStr); // 输出: Hello, JavaScript!

  三、总结
  - this的绑定规则取决于函数的调用方式，包括全局上下文、对象方法、构造函数、call、apply、bind和事件处理程序。
  - 内置函数的this指向调用它们的对象，遵循相同的绑定规则。
  - 理解this的绑定规则对于编写清晰、可维护的代码至关重要，尤其是在处理复杂的对象和函数时。
   -->
</head>
<body>

  <button id="myButton">内置函数的调用绑定(Binding of built-in function calls)</button>

  <script>
    // 1. 内置函数定时器
    setTimeout(function() {
      console.log(this); // 输出: window对象
    }, 1000);

    // 2. 内置函数事件处理程序
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      console.log(this); // 输出: <button id="myButton">...</button>
    })
    
    button.onclick = function() {
      console.log(this); // 输出: <button id="myButton">...</button>
    }

    // 3. 内置函数数组方法
    const arr = [1, 2, 3];
    arr.forEach(function(item) {
      console.log(this); // 输出: This is a custom context
    }, "This is a custom context")
    
  </script>
  
</body>
</html>